<template>
  <div id="map" style=" width: 100%;height:10rem;margin:1px;">
  </div>
</template>

<script>
import L from 'leaflet'
import markerIcon from 'leaflet/dist/images/marker-icon.png'
import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png'
import biaoqian from 'leaflet/dist/images/biaoqian.png'
import features from '../assets/static/hubei.json'
import simpleHubei from '../assets/static/hubeiSimple.json'

//上面在map的style中margin为1px是故意留出来的，为了避免在点击leaflet后出现异常的扩大，导致样式不匹配，同时height设置也不能越界
export default {
  data(){
    return {
      map: ""
    }
  },
  components: {

  },
  methods: {
    addmap() {
      let tianditu = L.supermap.tiandituTileLayer({
        // key: "d9961c5cd1d22dfd80f3984e44cd2478",
        key: "3352a450f393157074884346f937c47d",
        // key: "e455500d170d9a5b5b3bf85a5b323dbf",
        layerType: "img",
        noWrap: false,
      })
      // 初始化地图信息
      this.map = L.map('map', {
        center: [0,0],
        zoomControl:false,
        crs: L.CRS.TianDiTu_WGS84,
        dragging: true,
        doubleClickZoom: false,
        // layers: [tianditu, rivers, sections,basins, dams],
        layers: [tianditu],
        attributionControl: false,
        zoom: 8
      }).setView([29.91, 114.2933], 9);
      let tiandituLabel = L.supermap.tiandituTileLayer({
        isLabel: true,
        // key: "d9961c5cd1d22dfd80f3984e44cd2478"
        key: "3352a450f393157074884346f937c47d"
        // key: "e455500d170d9a5b5b3bf85a5b323dbf"
      }).addTo(this.map);

      L.control.zoom({
        zoomInTitle:"放大",
        zoomOutTitle:'缩小',
      }).addTo(this.map);
      //在地图上添加湖北省边界
      let style = {
        "color": "#0066FF", //边框颜色
        "weight": 2, //边框粗细
        "opacity": 0.7, //透明度
        "fillColor": 'red', //区域填充颜色
        "fillOpacity": 0, //区域填充颜色的透明
      };
      L.geoJSON(features,{style:style}).addTo(this.map);

      let myimage = L.icon({
        iconUrl: markerIcon, //图片url
        iconSize:[15,30],     //设置图片大小 宽度50.高度100
        iconAnchor: [0,0] ,    //设置定位点的位置。默认为中心  例子中以左上角为定位参考。相当于relative
        popupAnchor:[0 ,0],   //设置警示框位置 ，以iconAnchor的值进行定位。相当于absolute 例子中的警示框定位到有、右上角。

      });

      //由于雨量站的数目不多这里就直接就写成静态的了，没有与后端交互
      L.marker([29.98333, 113.916667],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("嘉鱼雨量站");

      L.marker([29.816667, 114.533333],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("常收畈雨量站");

      L.marker([29.516667, 114.466667],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("厦铺雨量站");

      L.marker([29.516667, 114.7],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("横石水文站");

      L.marker([29.7, 114.516667],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("万家雨量站");

      L.marker([29.65, 114.316667],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("沙墩雨量站");

      L.marker([29.566667, 114.216667],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("路口雨量站");

      L.marker([29.85, 114.033333],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("埠头雨量站");
      L.marker([29.733333, 114.1],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("黄沙雨量站");

      L.marker([29.983333, 114.116667],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("王家庄水位站");

      L.marker([30.05, 114.066667],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("余码头水文站");

      L.marker([29.716667, 114.35],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("柏墩雨量站");

      L.marker([29.766667, 114.233333],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("大桥雨量站");

      L.marker([29.866667, 114.283333],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("十好桥水文站");

      L.marker([30.05, 114.166667],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("三洲水位站");

      L.marker([30.3, 114.133333],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("金口水文站");

      L.marker([29.7132, 114.4139],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("南川水库雨量站");

      L.marker([29.7962, 114.4375],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("四门楼雨量站");

      L.marker([30.05, 114.366667],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("贺胜桥雨量站");

      L.marker([30.15, 114.15],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("法泗洲雨量站");

      L.marker([29.65, 114.356],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("石门雨量站");

      L.marker([30.2, 114.316667],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("土地堂雨量站");

      L.marker([30.333333, 114.383333],{
        icon:myimage,
        title:'雨量站',
      }).addTo(this.map).bindPopup("五里界雨量站");

      //由于排污口的数目不多这里就直接就写成静态的了，没有

      let myimage2 = L.icon({
        iconUrl: markerIcon2x, //图片url
        iconSize:[15,30],     //设置图片大小 宽度50.高度100
        iconAnchor: [0,0] ,    //设置定位点的位置。默认为中心  例子中以左上角为定位参考。相当于relative
        popupAnchor:[0 ,0],   //设置警示框位置 ，以iconAnchor的值进行定位。相当于absolute 例子中的警示框定位到有、右上角。

      });
      L.marker([29.83914277, 114.294714149],{
        icon:myimage2,
        title:'排污口',
      }).addTo(this.map).bindPopup("咸宁市温泉污水处理厂排污口（咸宁桑德甘源水务有限公司排污口），年排放量1994万吨");

      L.marker([29.885208249, 114.264354825],{
        icon:myimage2,
        title:'排污口',
      }).addTo(this.map).bindPopup("咸宁市永安污水处理厂排污口，年排放量1969.91万吨");

      L.marker([29.9166666666667, 114.283333333333],{
        icon:myimage2,
        title:'排污口',
      }).addTo(this.map).bindPopup("咸安区凤凰污水处理厂排污口，年排放量1095万吨");

      L.marker([29.9333333333333, 114.35],{
        icon:myimage2,
        title:'排污口',
      }).addTo(this.map).bindPopup("咸宁高新技术产业园区河背污水处理厂，年排放量1825万吨");

      L.marker([29.916, 114.296576],{
        icon:myimage2,
        title:'排污口',
      }).addTo(this.map).bindPopup("咸宁高新技术产业园区横沟污水处理厂排污口，年排放量1095万吨");

      L.marker([30.025722, 114.331518],{
        icon:myimage2,
        title:'排污口',
      }).addTo(this.map).bindPopup("梓山湖污水处理厂排污口，年排放量182.5万吨");

      L.marker([29.9599, 114.2933],{
        icon:myimage2,
        title:'排污口',
      }).addTo(this.map).bindPopup("官埠桥镇污水处理厂排污口，年排放量36.5万吨");

      L.marker([29.91377, 114.18224],{
        icon:myimage2,
        title:'排污口',
      }).addTo(this.map).bindPopup("向阳湖镇污水处理厂排污口，年排放量21.9万吨");

      //画出没有匹配的区域，对其进行遮罩处理
      let _this = this;
      _this.drawShadowBound(simpleHubei.features[0].geometry.coordinates);
    },
    drawShadowBound(coordinates,boundData){
      /*画遮蔽层的相关方法
     *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
     *      这样就做出了一个经过多次西北角的闭合多边形*/
      //定义中国东南西北端点，作为第一层
      let pNW = {lat: 59.0, lng: 73.0};
      let pNE = {lat: 59.0, lng: 136.0};
      let pSE = {lat: 3.0, lng: 136.0};
      let pSW = {lat: 3.0, lng: 73.0};
      // let pNW = {lat: 90, lng:-180};
      // let pNE = {lat: 90, lng:180 };
      // let pSE = {lat: -90, lng: -180};
      // let pSW = {lat:90, lng:180};
      //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
      let pArray = [];
      pArray.push(pNW);
      pArray.push(pSW);
      pArray.push(pSE);
      pArray.push(pNE);
      pArray.push(pNW);
      //循环添加各闭合区域
      for (let i = 0; i < coordinates.length; i++) {
        let points = [];
        let item1 = coordinates[i]
        for(let j = 0, l1=item1.length; j<l1; j++){
          let item2 = item1[j]
          for(let k = 0, l2 = item2.length; k<l2; k++){
            let item3 = item2[k]
            points.push({lat: item3[1], lng: item3[0]});
          }
        }
        //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
        pArray = pArray.concat(points);
        pArray.push(pArray[0]);
      }
      //添加遮蔽层
      let plyall = L.polygon(pArray, {color: 'transparent', fillColor: '#282525', fillOpacity: 0.8}); //建立多边形覆盖物
      //let plyall = L.polygon(pArray, {color: '#282525', fillColor: 'transparent', fillOpacity: 0.5}); //建立多边形覆盖物
      plyall.addTo(this.map);
    }
  },
  created() {
  },
  mounted() {
    this.addmap();
  }
}
</script>

<style scoped>

</style>

